<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      background-color: rgb(125, 115, 100);
      overflow-x: hidden;
    }

    header {
      height: 50px;
      background-color: red;
    }

    main {
      height: 50px;
      background-color: chartreuse;
    }

    .main-iframe {
      background-color: blue !important;

    }
  </style>
  <header>main头部</header>
  <main>main内容</main>
  <iframe width="100%" class="main-iframe" id="myIframe" name="mainFrame" loading="lazy" src="./iframe.html"
    frameborder="0" allowfullscreen title="iframe示例网页"></iframe>

  <script>




    // 获取iframe DOM元素
    const iframe = document.getElementById('myIframe');
    iframe.addEventListener('load', () => {
      // 父页面发送消息到 iframe 使用postMessage发送消息
      iframe.contentWindow.postMessage('你好-iframe' +

        iframe.contentWindow.location

        , '*',);// 第二个参数是目标源的协议和域名
    })

    // 父页面监听来自iframe的消息
    window.addEventListener('message', (event) => {
      // if (event.origin === "http://iframe-example.com") {
      //   console.log('Received message from iframe:', event.data);
      // }
      console.log('来自iframe的消息====>', event.data);
    });





  </script>
</body>

</html>